<script setup lang="ts">
import { ref } from "vue";
import { PAGINATIONFOOT } from "@/utils/staticData";
import inventoryDialog from "./inventoryDialog.vue";
import { setWarehouseUpdateStatus } from "@/api/warehouse";
import { useMessage } from "@/hooks/useMessage";

defineOptions({ name: "manageTable" });

defineProps({
  tableHeight: { default: 0, type: Number },
  tableData: { type: Array, default: () => [] },
  pagination: { type: Object, default: () => {} }
});

const emits = defineEmits(["handleSearch"]);
const { createNotification, createConfirm } = useMessage();

const visible = ref(false);
const curRow = ref({});

const handleCurrentRow = (row: any) => {
  curRow.value = row;
  visible.value = true;
};
const rowClick = (row: any) => {
  curRow.value = row;
};

/**
 * 停用仓库
 * @param row 当前行数据
 */
const handleDisable = (row: any) => {
  createConfirm({
    message: "确定停用吗？",
    center: false
  }).then(() => {
    setWarehouseUpdateStatus({ id: row.id, status: row.status == 1 ? 2 : 1 }).then(rsp => {
      createNotification({
        type: "success",
        message: rsp.msg
      });
      emits("handleSearch");
    });
  });
};
</script>

<template>
  <div>
    <el-table
      :data="tableData"
      class="tableBox"
      style="width: 100%"
      fit
      :height="
        tableHeight - (pagination.total > pagination.size ? PAGINATIONFOOT : 0)
      "
      @row-click="rowClick"
    >
      <el-table-column type="index" label="序号" min-width="80px" />
      <el-table-column prop="warehouseCode" label="仓库编码" min-width="118" show-overflow-tooltip />
      <el-table-column prop="warehouseName" label="仓库名称" min-width="148" show-overflow-tooltip />
      <el-table-column
        prop="warehouseTypeName"
        label="仓库类型"
        min-width="148"
        show-overflow-tooltip
      />
      <el-table-column prop="address" label="仓库地址" min-width="320" show-overflow-tooltip/>
      <el-table-column prop="status" label="仓库状态" min-width="124" show-overflow-tooltip>
        <template #default="{ row }">
          <el-text>{{ row.status == 1 ? "启用" : "禁用" }}</el-text>
        </template>
      </el-table-column>
      <el-table-column
        prop="leaderUserName"
        label="仓库负责人"
        min-width="140"
        show-overflow-tooltip
      />
      <el-table-column
        prop="receiveMobile"
        label="仓管联系方式"
        min-width="154"
        show-overflow-tooltip
      />
      <el-table-column fixed="right" label="操作" align="left" min-width="156">
        <template #default="{ row }">
          <el-button type="primary" link @click="handleCurrentRow(row)"
            >修改</el-button
          >
          <el-button
            :type="row.status == 1 ? 'danger' : 'primary'"
            link
            @click="handleDisable(row)"
            >{{ row.status == 1 ? "禁用" : "启用" }}</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <inventoryDialog
      ref="inventoryDialogRef"
      v-model:visible="visible"
      :row="curRow"
      @submit="emits('handleSearch')"
    />
  </div>
</template>
